﻿<template>
    <div style="height:100px;border:1px solid #cdcdcd;">
        <div style="display:block;height:100%;" v-on:click="open">
            <img ref="img" v-if="modelValue!=''" :src="getImgUrl(modelValue)" style="display:block;width:100%;height:100%;" v-on:click="open" />
        </div>
        <HandWriteDialog v-if="dlgVisible" ref="dlg" v-model="modelValue2" :readonly="readonly" :extData="extData" :server="server" :disabled="disabled" 
            @selected="signDone" @clear="clearSign" @close="dlgClose" :lineWidth="lineWidth"/>
    </div>
</template>

<script>
    import store from '../store'
    import HandWriteDialog from './HandWriteDialog.vue';

    export default {
    name: "HandWriteBoard",
    emits: ["update:modelValue", "done"],
    props: {
        modelValue: {
            type: String,
            default: "",
        },
        readonly: {
            type: Boolean,
            default: false,
        },
        extData: {
            type: Object,
            default: function () {
                return {
                    modelName: "Sign",
                    thumbSize: 0,
                    schID: 0,
                };
            }
        },
        server: {
            type: String,
            default: "/Common/UploadFile"
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        lineWidth:{
            type:Number,
            default:7
        }
    },
    data(){
        return {
            dlgVisible:false
        }
    },
    methods: {
        getImgUrl(url) {
            return store.getUrl(url);
        },
        open() {
            this.dlgVisible = true;
            this.$nextTick(()=>{
                this.$refs.dlg.open();
            })
        },
        signDone(url){
            this.$emit("update:modelValue",url);
            this.$emit("done",url);
        },
        clearSign(){
            this.$emit("update:modelValue","");
            this.$emit("done","");
        },
        dlgClose(){
            this.dlgVisible = false;
        }
    },
    computed:{
        modelValue2:{
            get(){
                return this.modelValue;
            },
            set(val){
                this.$emit("update:modelValue", val);
            }
        }
    },
    components: { HandWriteDialog }
}

</script>